<template>
  <div class="container">
   <!-- 返回按钮 -->
  <button class="back-button" @click="goBack">返回</button>

    <!-- 图表容器 -->
    <div class="chart-container">
      <Echart
          id="rightTop"
          :options="option"
          class="right_top_inner"
          ref="charts"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data() {
    return {
      seriesDate: {
      '8.27': [
        [0, -1000], [20, 0], [40, 2000], [60, 4000], [80, 6000],
        [100, 8000], [95.07, 2000],[95.57, 660]
      ],
      '8.29': [
        [0, -500], [20, 0], [40, 3000], [60, 5000], [80, 7000],
        [100, 9000], [120, 11000], [140, 13000]
      ],
      '8.30': [
        [0, 0], [20, 2000], [40, 4000], [60, 6000], [80, 8000],
        [100, 10000], [120, 12000], [140, 14000]
      ]
    },
      option: {} // 用于配置 Echarts 图表的选项
    };
  },

  created() {
    this.getData(); // 用于获取数据
  },  

  methods: {
    async getData() {
      try {
        const response = await axios.get('http://localhost:8080/stress/grouped');
        console.log('echartstress查询应力的response.data = ', response.data);
        console.log('echartstress查询应力的response = ', response);

        //修改格式
        // res 为接口返回的完整对象
        this.seriesDate = Object.fromEntries(
          Object.entries(response.data).map(([date, arr]) => [
            date,
            arr.map(({ deepth, stress }) => [Number(deepth), Number(stress)])
          ])
        );

        if (response.code === '0') {
          this.$nextTick(() => {
            console.log('Dom已经渲染~~')  
            console.log('this.seriesDate = ',this.seriesDate) 
            this.init(this.seriesDate);
          });
        } else {
          this.$message.error('查询应力失败');
        }
      } catch (error) {
        this.$message.error('查询应力失败');
      }
      // this.$nextTick(() => {
      //       console.log('Dom已经渲染~~')  
      //       console.log('this.seriesDate = ',this.seriesDate)  
      //       this.init(this.seriesDate);
      //     });
    },
    init(data) {
      console.log('开始画图~~~');

      const colors = [
        "rgba(236,167,30,0.7)",
        "rgba(30,144,236,0.7)",
        "rgba(30,236,144,0.7)",
        "rgba(144,30,236,0.7)",
        "rgba(236,30,144,0.7)"
      ];

      //整体平移2000
      const shift = 2000;
      const series = Object.entries(data).map(([name, points], idx) => ({
        name,
        type: 'line',
        data: points.map(([x, y]) => [y + shift, x]), // 交换 xy
        smooth: true,
        symbol: 'none',
        color: colors[idx % colors.length]
      }));

      // 假设 data 的 key 就是系列名
      const seriesNames = Object.keys(data);

      // 默认全部隐藏
      const selectedMap = {};
      seriesNames.forEach(name => { selectedMap[name] = false; });

      this.option = {
        xAxis: {
          type: 'value',
          name: 'stress(μɛ)',
          min: 0,
          max: 16000 + shift,
          interval: 2000,
          position: 'top',        
          splitLine: { show: false },
          axisLine: { 
            show: true, 
            lineStyle: { color: '#1F63A3', width: 2 },
            onZero: false  // 强制轴线也画在top
          },
          axisLabel: { 
            color: '#7EB7FD', 
            fontWeight: 500,
            formatter: val => val - 2000, // ← 显示为原始值 
            }
        },
        yAxis: {
          type: 'value',
          name: 'Deepth(m)',
          min: 0,
          max: 140,
          interval: 20,
          position: 'left',          // 放在左侧
          inverse: true,            // true 可让 0 在顶部
          splitLine: { show: false },
          axisLine: { show: true, lineStyle: { color: '#1F63A3', width: 2 } },
          axisLabel: { color: '#7EB7FD', fontWeight: 500 }
        },
        legend: { // 标签
          data: Object.keys(data),
          right: 10,
          top: 'center',
          orient: 'vertical',
          textStyle: { color: '#7EB7FD' },
          selectedMode: 'multiple',
          selected: selectedMap       // 初始全部不选中
        },
        grid: { // 网格
          left: '10%',   // 避免左边距过大
          right: '10%',
          top: '10%',
          bottom: '10%',
          containLabel: true // 确保标签不溢出
        },
        series
      };

      this.$refs.charts.echartsInstance.setOption(this.option, true);
    },

// 返回上一个页面
goBack() {
  this.$router.go(-1); // 使用 Vue Router 的返回功能
},
},
};
</script>

<style lang='scss' scoped>
.container {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chart-container {
  width: 1200px; /* 调整图表容器的宽度 */
  height: 650px; /* 调整图表容器的高度 */
  border-radius: 5px;
  // overflow: hidden;
  min-width: 1200px; /* 防止被压缩 */
  min-height: 650px;
}
.back-button {
  margin-bottom: 5px;
  padding: 10px 20px;
  font-size: 15px;
  background-color: rgba(0, 184, 255, 0.18);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.back-button:hover {
  background-color: #45a049;
}
.right_top_inner {
  width: 100%;
  height: 100%;
}
</style>